<template>
  <UserSearchCom></UserSearchCom>

  <el-table
    v-loading="userListLoading"
    :data="userList.arr"
    stripe
    highlight-current-row
    max-height="440"
  >
    <el-table-column prop="id" label="用户编号" width="80"></el-table-column>
    <el-table-column prop="username" label="用户名" width="200">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <el-tag>{{ scope.row.username }}</el-tag>
            <div>注册时间: {{ scope.row.registrationTime }}</div>
            <div>上一次登录时间: {{ scope.row.lastLoginTime }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.username }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="sex" label="性别" width="80"></el-table-column>
    <el-table-column prop="birthday" label="出生日期"></el-table-column>
    <el-table-column prop="phone" label="手机号"></el-table-column>
    <el-table-column prop="email" label="电子邮箱" width="250"></el-table-column>
    <el-table-column prop="status" label="状态">
      <template #default="scope">
        <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
        <el-tag v-else type="warning">禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="250">
      <template #default="scope">
        <el-button type="primary" @click="preEditUser(scope.row)">编辑</el-button>
        <el-button
          v-if="scope.row.status === 1"
          type="warning"
          @click="disableUser(scope.row.username)"
          >禁用</el-button
        >
        <el-button v-else type="success" @click="disableUser(scope.row.username)">启用</el-button>
        <el-button type="danger" @click="preDeleteUser(scope.row.username)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    :page-sizes="[7, 9, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :background="true"
    class="pagination"
    @change="getUserList"
  />

  <el-dialog v-model="editUserVisible" title="编辑用户" width="40%">
    <el-form :model="editUserForm" label-width="auto" label-position="right">
      <el-form-item label="姓名">
        <el-input v-model="editUserForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="editUserForm.age" :min="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="editUserForm.sex">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          v-model="editUserForm.birthday"
          type="date"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="editUserForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" required>
        <el-input v-model="editUserForm.email"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editUserVisible = false">取 消</el-button>
      <el-button type="primary" @click="editUser">确 定</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="addUserVisible" title="添加用户" width="40%" :show-close="false">
    <el-form :model="addUserForm.newUser" label-width="auto" label-position="right">
      <el-form-item label="用户名" required>
        <el-input v-model="addUserForm.newUser.username"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="addUserForm.newUser.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="addUserForm.newUser.age" :min="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="addUserForm.newUser.sex">
          <el-radio value="男">男</el-radio>
          <el-radio value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-date-picker
          v-model="addUserForm.newUser.birthday"
          type="date"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="addUserForm.newUser.phone"></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" required>
        <el-input v-model="addUserForm.newUser.email"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancelAddUser">取 消</el-button>
      <el-button type="primary" @click="addUser">确 定</el-button>
    </template>
  </el-dialog>

  <el-dialog v-model="deleteUserVisible" title="删除用户" width="40%" :show-close="false">
    <span>确定要删除该用户吗？</span>
    <template #footer>
      <div>
        <el-button @click="deleteUserVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteUser">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="UserManagePage">
import { onMounted } from 'vue'
import UserSearchCom from '../components/UserSearchCom.vue'
import { useUserInfo } from '../hooks/useUserInfo'
const {
  userListLoading,
  userList,
  deleteUserVisible,
  currentPage,
  pageSize,
  total,
  editUserVisible,
  editUserForm,
  addUserVisible,
  addUserForm,
  getUserList,
  disableUser,
  preDeleteUser,
  deleteUser,
  preEditUser,
  editUser,
  addUser,
  cancelAddUser
} = useUserInfo()
onMounted(() => {
  getUserList()
})
</script>
<style lang="less" scoped>
.pagination {
  margin-top: 10px;
}
</style>
